<template>
	<view class="">
	<view class="nav">
		<image @click="navToBack" src="/static/split-new/return2x.png" mode=""></image>
		<text style="margin-left: 45upx;font-size: 16px;">个人信息</text>
		<text style="margin-right: 50upx;font-size: 14px;" @click="saveUser">保存</text>
	</view>
		<!-- 用户信息界面 -->
		<view class="p-info">

			<!-- 头像部分 -->
			<view class="pi-icon">
				<image :src="userInfo.shavatar" mode="aspectFill"></image>
				<view class="pi-changeIcon" @click="onChangeIcon">
					点击修改头像
				</view>
			</view>

			<view class="pi-content">
				<view class="ct-item">
					<view class="it-l">
						用户ID
					</view>
					<view class="it-r">
						1234567890
					</view>
				</view>
				<view class="ct-item">
					<view class="it-l">
						账号
					</view>
					<view class="it-r">
						微信
					</view>
				</view>
				<view class="ct-item">
					<view class="it-l">
						昵称
					</view>
					<view class="it-r">
						<input type="text" v-model="userInfo.nickname" maxlength="10" />
					</view>
				</view>
				<view class="ct-item">
					<view class="it-l">
						会员等级
					</view>
					<view class="it-r">
						普通会员
					</view>
				</view>
				<view class="ct-item">
					<view class="it-l">
						性别
					</view>
					<view class="it-r">
						<radio-group @change="changeSex">
							<label>
								<radio style="transform:scale(0.7)" color="#ff557d" value="1" :checked="'1' == userInfo.sex" /><text>男</text>
								<radio style="transform:scale(0.7)" color="#ff557d" value="2" :checked="'2' == userInfo.sex" class="woman" /><text>女</text>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="ct-item">
					<view class="it-l">
						出生日期
					</view>
					<view class="it-r">
						<picker mode="date" :value="userInfo.birthday" @change="changeData">
							<view class="uni-input">{{userInfo.birthday}}</view>
						</picker>
					</view>
				</view>

				<view class="ct-item">
					<view class="it-l">
						我的收货地址
					</view>
					<view class="it-r youjiantou" @click="navTo('/pages/set/shipAddress')">
						<text class="iconfont">&#xe600;</text>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}, // 用户信息
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		// onNavigationBarButtonTap(e) {
		// 	this.saveUserInfo();
		// },
		methods: {
			navToBack(){
				uni.navigateBack()
			},
			saveUser(){
				this.saveUserInfo();
			},
			async getUserInfo() {
				let a = await this.$http.getUserInfo();
				this.userInfo = a.data;
			},
			async saveUserInfo() {
				let user_info = uni.getStorageSync('lph-user-info');
				let a = await this.$http.saveUserInfo(this.userInfo);
				if (a.code == 200) {
					// 1.更新头像
					// 2.更新用户名
					user_info['shavatar'] = this.userInfo['shavatar'];
					user_info['nickname'] = this.userInfo['nickname'];
					uni.setStorageSync('lph-user-info', user_info);
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack();
					}, 500)
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},

			changeSex(e) { // 修改性别
				this.userInfo.sex = e.target.value;
			},
			changeData(e) { // 修改出生日期
				this.userInfo.birthday = e.target.value;
			},
			onChangeIcon() {
				let _self = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						_self.iconPath = res.tempFilePaths[0];
						uni.uploadFile({ //图片上传							
							url: _self.$common.baseUrl.setUploadImg,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (reso) => {
								let res1 = JSON.parse(reso.data);
								_self.userInfo.shavatar = res1.data.file;
							},
							fail: (e) => {}
						});
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/set.scss';
	.nav{
		height: 128upx;
		width: 100%;
		padding-top: 66upx;
		background-color:#FF557D;
		display: flex;
		align-items: cneter;
		justify-content: space-between;
		color: #FFFFFF;
		image{
			margin-left: 30upx;
			margin-top: 10upx;
			width: 28upx;
			height: 38upx;
		}
		// &>text:first-of-type(1){
		// 	margin-left: 20upx;
		// }
		// &>text:last-child{
		// 	margin-right: 25upx;
		// }
	}
</style>
